<template>
  <div v-loading="isLoading">
    <el-button
      type="text"
      class="right-button"
      @click="showAdd(initAddConfig(), 1)"
      >添加数据</el-button
    >
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      border
      :default-sort="{ prop: 'createTime', order: 'descending' }"
      @row-click="showDesc"
    >
      <el-table-column prop="configName" label="数据名称"> </el-table-column>
      <el-table-column prop="configValue" label="数据值"> </el-table-column>
      <el-table-column
        prop="children.length"
        sortable
        label="数据数量"
        width="110"
      >
      </el-table-column>
      <el-table-column prop="createUserNickname" label="创建人">
      </el-table-column>
      <el-table-column prop="createTime" sortable label="创建时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="showDesc(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button
            @click.stop="showAdd(scope.row, 2)"
            type="text"
            size="small"
            >编辑</el-button
          >
          <el-button
            type="text"
            style="color: #f56c6c"
            size="small"
            @click.stop="del(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="数据项" width="60%" :visible.sync="isShowDesc" v-loading="isLoading">
      <el-table :data="currentChildren" stripe style="width: 100%">
        <el-table-column prop="configName" label="数据名称"/>
        <el-table-column prop="configValue" label="数据值"/> 
        <el-table-column prop="createUserNickname" label="创建人"/> 
        <el-table-column prop="createTime" label="创建时间" sortable />
      </el-table>
    </el-dialog>

    <el-dialog title="系统字典" :visible.sync="isAdd" v-loading="isLoading">
      <el-form ref="addConfig" label-width="70px" :inline="true">
        <el-row>
          <el-col :span="11">
            <el-form-item label="数据名称" prop="configName">
              <el-input v-model="addConfig.configName" :disabled="isEdit" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="数据值" prop="configValue">
              <el-input v-model="addConfig.configValue" />
            </el-form-item>
          </el-col>
        </el-row>
        <hr />
        <br />
        子数据项：<br /><br />
        <el-row v-for="item in addConfig.children" :key="item.id">
          <el-col :span="11">
            <el-form-item label="数据名称" prop="configName">
              <el-input v-model="item.configName" :disabled="!item.isNew" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="数据值">
              <el-input v-model="item.configValue" />
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item>
              <el-button
                type="text"
                style="color: #f56c6c"
                @click="addDel(item)"
                >删除</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :offset="6">
            <el-button style="width: 100%" type="primary" @click="addSave"
              >保存</el-button
            >
          </el-col>
          <el-col :span="6">
            <el-button style="width: 100%" @click="addChild"
              >添加数据项</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { Message } from "element-ui";
export default {
  name: "configPage",
  data() {
    return {
      isAdd: false,
      addConfig: {},
      tableData: [],
      isLoading: true,
      isShowDesc: false,
      isEdit: false,
      currentChildren: [],
      loginUser: {},
    };
  },
  methods: {
    listData() {
      this.isLoading = true;
      this.postRequest("/admin/config/list").then((res) => {
        this.tableData = res.data.data;
        this.isLoading = false;
      });
    },
    showDesc(row) {
      this.isShowDesc = true;
      this.currentChildren = row.children;
    },
    addDel(item) {
      if (this.addConfig.children.length <= 1) {
        Message({
          message: "数据项最少一个",
          type: "error",
        });
        return;
      }
      var index = this.addConfig.children.indexOf(item);
      if (index !== -1) {
        this.addConfig.children.splice(index, 1);
      }
    },
    addChild() {
      this.addConfig.children.push({
        configName: "",
        configValue: "",
        key: Date.now(),
        isNew: true,
      });
    },
    isEmptyStr(s) {
      if (typeof s == "string" && s.length > 0) {
        return false;
      }
      return true;
    },
    isNotTrim(str) {
      if (str.indexOf(" ") == -1) {
        return false;
      }
      return true;
    },
    addSave() {
      if (
        this.isEmptyStr(this.addConfig.configName) ||
        this.isEmptyStr(this.addConfig.configValue)
      ) {
        Message({
          message: "请填写所有数据",
          type: "error",
        });
        return;
      }
      if (this.isNotTrim(this.addConfig.configName)) {
        Message({
          message: "数据名称不能包含空格",
          type: "error",
        });
        return;
      }

      for (let item of this.addConfig.children) {
        if (
          this.isEmptyStr(item.configName) ||
          this.isEmptyStr(item.configValue)
        ) {
          Message({
            message: "请填写所有数据",
            type: "error",
          });
          return;
        }
        if (this.isNotTrim(item.configName)) {
          Message({
            message: "数据名称不能包含空格",
            type: "error",
          });
          return;
        }
        if ((item.id + "").indexOf("newId") == 0) {
          item.id == null;
        }
        item.createUser = this.loginUser.id;
      }

      this.isLoading = true;
      this.addConfig.createUser = this.loginUser.id;
      this.postRequest("/admin/config/save", this.addConfig).then((res) => {
        if (res.data.status == 501) {
          Message({
            message: "数据项重复" + res.data.data,
            type: "error",
          });
          this.isLoading = false;

          return;
        }
        this.initAddConfig();
        this.isAdd = false;
        this.listData();
        if (res.data.status == 200) {
          Message({
            message: "保存成功",
            type: "success",
          });
        }
      });
    },
    initAddConfig() {
      this.addConfig = {
        configName: "",
        configValue: "",
        createUser: "",
        isParent: 1,
        children: [
          {
            configName: "",
            configValue: "",
            id: Date.now(),
            isNew: true,
          },
        ],
      };
      return this.addConfig;
    },
    showAdd(item, type) {
      if (type == 2) {
        this.isEdit = true;
        this.addConfig = item;
        if (this.addConfig.children == undefined) {
          this.addConfig.children = [
            {
              configName: "",
              configValue: "",
              id: "newId" + Date.now(),
            },
          ];
        }
      } else {
        this.isEdit = false;
      }
      this.isAdd = true;
    },
    del(id) {
      this.deleteRequest(`/admin/config/delete/${id}`).then((res) => {
        if (res.data.status == 200) {
          Message({
            message: "删除成功",
            type: "success",
          });
        }
        this.listData();
      });
    },
  },
  created() {
    this.loginUser = JSON.parse(localStorage.getItem("loginUser"));
    this.initAddConfig();
    this.listData();
  },
};
</script>
<style>
.right-button {
  float: right;
  margin-right: 5%;
  margin-top: 1em;
}
</style>
